<template>
	<view class="cardInfo">
		<u-navbar
			title="月卡信息"
			:border-bottom="false" 
			title-color="#000"
		></u-navbar>
		<view class="card">
			<view class="user-box">
				<u-avatar :src="userInfo.avatarUrl" size="80" style="margin-right: 10px;"></u-avatar>
				<view class="user-box__info">
					<view class="user-box__info__username">{{userInfo.nickname}}</view>
					<view class="user-box__info__renew">查看购买记录 </view>
				</view>
			</view>
			<view class="card-info">
				<view class="card-info__type">园区：</view>
				<view class="card-info__value">深圳园区</view>
			</view>
			<view class="card-info">
				<view class="card-info__type">购买时间：</view>
				<view class="card-info__value">2021-6-14</view>
			</view>
			<view class="card-info">
				<view class="card-info__type">到期时间：</view>
				<view class="card-info__value">2021-6-14</view>
			</view>
			<view class="record" @click="renew">
				立即续费
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		computed:{
			userInfo:function(){
				console.log("computed:userInfo",this.$store.state.userInfo)
				return this.$store.state.userInfo
			}
		},
		methods: {
			renew(){
				uni.navigateTo({
					url:"/pages/core/mine/rechargeCard/renew"
				})
			}
		}
	}
</script>

<style lang="less">
.cardInfo{
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
}
.user-box{
	display: flex; 
	align-items: flex-start;
	padding: @uni-spacing-row-sm @uni-spacing-col-lg  @uni-spacing-row-lg @uni-spacing-col-lg;
	&__info{
		display: flex;
		flex-direction: row;
		align-items: center;
		&__username{
			font-weight: bold;
			// color: @color-green;
		}
		&__renew{
			margin-left: @uni-spacing-col-sm;
			padding: @uni-spacing-row-sm @uni-spacing-row-lg;
			border:@line-light-size solid @color-green;
			border-radius: @uni-border-radius-lg;
			color: @color-green;
			font-size: @uni-font-size-sm;
			font-weight: lighter;
			
		}
	}
	&__tohome{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: @uni-font-size-sm;
		// color: @font-color-blue;
	}
}
.card-info{
	display: flex;
	flex-direction: row;
	padding-left: @uni-spacing-col-lg;
	padding-right: @uni-spacing-col-lg;
	padding-top: @uni-spacing-row-base;
	// padding-bottom: @uni-spacing-row-base;
	&__type{
		color: @font-color-grey;
	}
	&__value{
		// font-size: @uni-font-size-lg;
	}
}
.card{
	display: flex;
	flex-direction: column;
	margin: @uni-spacing-row-sm @uni-spacing-col-base;
	border-radius: @uni-border-radius-lg;
	background-color: #fff;
}
.record{
	margin-top: @uni-spacing-row-base;
	margin-right: @uni-spacing-col-lg;
	margin-left: auto;
	margin-bottom: @uni-spacing-row-base;
	align-self: flex-end;
	padding: @uni-spacing-row-sm @uni-spacing-row-lg;
	background-color: @color-green;
	border-radius: @uni-border-radius-base;
	color: #fff;
	font-size: small;
	font-weight: lighter;
}
</style>
